<template>
	<view>
		<v-tabs v-model="current" :tabs="tabs" @change="changeTab" activeColor="#B8212B" lineColor="#B8212B"></v-tabs>

		<view class="video-history" v-if="current===0">
			<you-scroll ref="scroll" :fetch="getVideoHistoryList">
				<view slot-scope="{row,index}">
					<view class="video-item" @click="goVideoDetail(row,index)">
						<view class="video-item-image" :style="{'background-image':`url(${row.url_images1})`}">
							<image src="@/static/image/play.png" mode=""></image>
							<view class="video-time">{{row.time1}}/{{row.video_time1}}</view>
						</view>
						<view class="video-content">
							<view class="video-word">
								<text>{{row.name}}</text>
							</view>
							<view class="video-label">
								<text class="label-name" style="background: #F3F8FF;color: #1466E3;" v-if="row.categ_id=='初级'">{{row.categ_id}}</text>
								<text class="label-name" style="background: #F2FFFB;color: #00D49A;" v-if="row.categ_id=='中级'">{{row.categ_id}}</text>
								<text class="label-name" style="background: #FFF9F0;color: #FF9700;" v-if="row.categ_id=='高级'">{{row.categ_id}}</text>
							</view>

							<view class="play-time">
								<image class="video-eye" src="@/static/image/eye.png" mode="" />{{row.watch_time1}}</view>
						</view>
					</view>
				</view>
			</you-scroll>

		</view>
		<view class="other-history" v-if="current===1">
			22
		</view>
		<view class="other-history" v-if="current===2">
			33
		</view>
	</view>
</template>

<script>
	import JobListItem from '../../home/job/components/JobListItem.vue'
	import RecruitmentListItem from '../../home/job/components/RecruitmentListItem.vue'
	import youScroll from '@/components/uni-list-scroll/you-scroll'
	import request from '@/static/js/request.js';
	import {
		videoHistoryList
	} from '../../../static/js/api/home.js'
	var self;
	export default {
		components: {
			youScroll,

		},
		data() {
			return {
				current: 0,
				tabs: ['视频']
			}
		},
		mounted() {
			this.$refs.scroll.loadData();
			self = this;
		},
		methods: {
			changeTab(e) {

			},
			getVideoHistoryList(pageIndex, pageSize) {
				let userInfo = JSON.parse(uni.getStorageSync('userInfo'));
				let url = request.getBaseUrl();

				return videoHistoryList(pageIndex, pageSize, userInfo.uid).then(res => {
					if (res.data) {
						res.data = res.data.map(m => {

							return {
								url_images1: url + m.url_images1,
								time1: self.s_to_hs(m.time),
								video_time1: self.s_to_hs(m.video_time),
								watch_time1: self.getDayName(m.watch_time),
								...m,

							}
						})
						return res.data;

					} else {
						return []
					}


				})
			},
			goVideoDetail(item) {
				uni.navigateTo({
					url: `/pages/home/class/ClassDetailPage?id=${item.id}&initialTime=${item.time}`
				})
			},
			getStyle(label) {
				if (label == '初级') {
					return 'background: #F3F8FF;color: #1466E3;'
				} else if (label == '中级') {
					return 'background: #F2FFFB;color: #00D49A;'
				} else if (label == '高级') {
					return 'background: #FFF9F0;color: #FF9700;'
				}

			},
			getDayName(d) {
				var td = new Date();
				td = new Date(td.getFullYear(), td.getMonth(), td.getDate());
				var od = new Date(d);
				od = new Date(od.getFullYear(), od.getMonth(), od.getDate());
				var xc = (od - td) / 1000 / 60 / 60 / 24;

				if (xc < -1) {
					return d;
				} else if (xc < 0) {
					return "昨天" + d.substr(11, 18);
				} else if (xc == 0) {
					return "今天" + d.substr(11, 18);
				} else if (xc < 2) {
					return "明天";
				} else if (xc < 3) {
					return "后天";
				} else {
					return xc + "天后";
				}
			},
			/**
			 * 将秒转换为 分:秒
			 * s int 秒数
			 */
			s_to_hs(s) {
				//计算分钟
				//算法：将秒数除以60，然后下舍入，既得到分钟数
				var h;
				h = Math.floor(s / 60);
				//计算秒
				//算法：取得秒%60的余数，既得到秒数
				s = s % 60;
				//将变量转换为字符串
				h += '';
				s += '';
				//如果只有一位数，前面增加一个0
				h = (h.length == 1) ? '0' + h : h;
				s = (s.length == 1) ? '0' + s : s;
				console.log(h + ':' + s)
				return h + ':' + s;
			}


		}
	}
</script>

<style lang="less" scoped>
	.video-history {
		height: calc(100vh - 38rpx);
	}

	.video-item {
		display: flex;
		align-items: center;
		background: #fff;
		padding: 20rpx 30rpx 20rpx 30rpx;
		margin-bottom: 20rpx;

		.video-item-image {
			width: 226rpx;
			height: 168rpx;
			background-size: 100% 100%;
			background-repeat: no-repeat;
			position: relative;

			image {
				width: 48rpx;
				height: 48rpx;
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
			}

			.video-time {
				color: #fff;
				background: rgba(0, 0, 0, 0.4);
				padding: 5px;
				display: flex;
				align-items: center;
				position: absolute;
				bottom: 0;
				right: 0;
				font-size: 24rpx;
			}
		}

		.video-content {
			flex: 1;
			margin-left: 23rpx;

			.video-word {
				word-break: break-all;
				text-overflow: ellipsis;
				overflow: hidden;
				display: -webkit-box;
				-webkit-line-clamp: 1;
				-webkit-box-orient: vertical;
				margin-bottom: 8rpx;
				font-size: 32rpx;
				font-weight: 400;
				color: #333333;
				line-height: 44rpx;
			}

			.video-label {
				display: flex;
				margin-bottom: 35rpx;

				.label-name {
					// width: 76rpx;
					height: 38rpx;
					font-size: 24rpx;
					line-height: 38rpx;
					padding: 0 14rpx;
					background: #F2FFFB;
					border-radius: 6rpx;
				}

				.video-date {
					font-size: 28rpx;
					font-weight: 400;
					color: #333333;
					flex: 1;
					text-align: right;
				}
			}

			.video-remarks {
				display: flex;
				text-align: center;
				align-items: center;
				font-size: 28rpx;
				font-weight: 400;
				color: #666666;
				line-height: 40rpx;

				.video-time {
					flex: 1;
					text-align: left;
				}

				.video-eye {
					width: 30rpx;
					height: 22rpx;
					margin-right: 14rpx;
				}

				.video-value {

					color: #999999;
				}
			}


			.play-time {
				color: #999999;

				image {
					width: 30rpx;
					height: 22rpx;
					margin-right: 14rpx;
				}
			}
		}
	}
</style>
